<template>
	<!-- 搜索区域 -->
  <div class="search-view global-display global-a-items fadeIn">
	  <div @click="skipCity" class="global-display global-a-items">
	  	  <p>{{address}}</p>
	  	  <img :src="addIcon" alt="">
	  </div>
	  <van-search @click="skipSearch" disabled background="none" class="search-flex" shape="round" placeholder="搜索地点/美食/路线等" />
  </div>
  <!-- 背景图片 -->
  <div class="search-back fadeIn">
	  <img src="@/icon/found/found-search-back.jpg" alt="">
  </div>
  <!-- 当地玩法 -->
  <p class="cityplay">当地玩法</p>
  <div class="cityplay-grid global-display global-f-wrap fadeIn">
	<div v-for="(item,index) in localPlay" :key="index" @click="classTravel(item.categories)">
		<img :src="item.image" alt="">
		<p :style="{backgroundColor:item.color}">{{item.categories}}</p>
	</div>
  </div>
  <!-- 当地攻略 -->
  <p class="cityplay">当地游记</p>
  <!-- 瀑布流 -->
  	<van-list
  		  v-model:loading="loading"
  		  :finished="finished"
  		  finished-text="没有更多了"
  		  :immediate-check="false"
  		  offset="100"
  		  @load="onLoad"
  	>
  	<card :userTravels="userTravels"/>
  	</van-list>
  <div style="height: 100px;"></div>
  <tabbar/>
  <skIndex v-if="skeLeton"/>
</template>

<script setup>
import tabbar from '@/page/Tabbar/index.vue'
import card from '@/page/Common-components/card-flow.vue'
import { ref,onMounted, reactive,onUnmounted,watch } from 'vue'
// 引入图标
import found_ad from '@/icon/found/found-ad.svg'
import found_ad_two from '@/icon/found/found-ad-two.svg'
import request from '@/api/request.js'
import { qqLbs } from "@/api/qq-lbs.js"
import { useRouter } from 'vue-router'
const $router = useRouter()  // 这是路由跳转的
// pinia
import { dataSet } from "@/store/index.js";
const store = dataSet();
import skIndex from '@/page/Skeleton-screen/SK-found.vue'

// 存储滚动时需要更新的搜索栏样式
const textColor = ref('#ffffff');//城市文字颜色
const searchColor = ref('#ffffff');//搜索框颜色
const searchBack = ref(0)//搜索框背景
const addIcon = ref(found_ad)//选择地址上的图标
// 存储定位选择的地址
const address = ref('昆明市')
// 存储当地玩法
const localPlay = ref([])
// 存储用户游记
const userTravels = ref([])
// 骨架屏
const skeLeton = ref(true)
onMounted(async()=>{
	// 定位
	address.value = await qqLbs()
	//当地玩法和当地游记
	const gameplay = await request.get('/local_gameplay')
	const travel = await request.get('/local_travel',{page:1,address:address.value})
	// console.log(gameplay);
	localPlay.value = gameplay.data
	userTravels.value = travel.data
	skeLeton.value = false
	// 滚动监听
	window.addEventListener('scroll',handleScroll)
})

const handleScroll = ()=>{
	searchBack.value = window.scrollY >= 100 ? 1 : window.scrollY / 300
	textColor.value = window.scrollY >= 100 ? '#242629' : '#ffffff'
	searchColor.value = window.scrollY >= 100 ? '#f6f7f8' : '#ffffff'
	addIcon.value = window.scrollY >= 100 ? found_ad_two : found_ad
}
// 离开页面销毁滚动监听
onUnmounted(() => {
	window.removeEventListener('scroll', handleScroll);
	finished.value = false
});
const loading = ref(false);
const finished = ref(false);
// 上啦加载
const page = ref(1)
async function onLoad(){
	page.value++
	const user_travels = await request.get('/local_travel',{page:page.value,address:address.value})
	userTravels.value = [...userTravels.value,...user_travels.data]
	loading.value = false
	if(user_travels.data.length === 0){
		finished.value = true
	}
}
// 跳转城市选择页
function skipCity(){
	$router.push('/search-city')
}
// 跳转景点搜索
function skipSearch(){
	$router.push('/search-travel')
}
// 监听手动选择的定位
watch(()=>store.address,async(newVal,oldVal)=>{
	// console.log(newVal);
	address.value = newVal
	const travel = await request.get('/local_travel',{page:1,address:address.value})
	// console.log(travel);
	userTravels.value = travel.data
})
// 分类跳转
function classTravel(keywords){
	$router.push({path: '/query-travel', query: {keywords,address:address.value,type:'102'}})
}
</script>

<style scoped>
.search-view{
	padding: 5px 0 5px 10px;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	background-color: rgba(255, 255, 255, v-bind('searchBack'));
	z-index: 999;
}
.search-view p{
	font-size: 17px;
	font-weight: bold;
	color: v-bind('textColor');
}
.search-view img{
	width: 15px;
	height: 15px;
	display: block;
	margin-left: 5px;
}
.search-flex{
	flex: 1;
}
.search-back, img{
	object-fit:cover;
	width: 100%;
	height: 170px;
}
::v-deep .van-search__content {
  background-color: v-bind('searchColor') !important;
}
.cityplay{
	padding: 20px 10px 10px 10px;
	font-size: 18px;
	font-weight: bold;
}
.cityplay-grid{
	margin: 0 5px;
}
.cityplay-grid div{
	width: calc(33.33% - 5px*2);
	margin: 5px;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	height: 110px;
}
.cityplay-grid img{
	width: 100%;
	height: 110px;
	object-fit: cover;
}
.cityplay-grid p{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 5px 8px;
	font-size: 14px;
	color: #ffffff;
}
</style>